<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        
        }
        .box{
            position: relative;
            width: 800px;
            height: 500px;
            border-color: black;
            border: solid 1px;
        }
        .smbox{
            position: relative;
            top: 10px;
            margin: auto;
            width: 750px;
            height: 100px;
            border: rgb(83, 80, 83) solid 1px;
        }
        #hightlightbutton1{
			background-color: initial;
			border-color: #ccc;
		}
		#hightlightbutton1:active{
			background-color: gold;
			border-color: #fff;
		}
		#hightlightbutton2{
			background-color: initial;
			border-color: #ccc;
		}
		#hightlightbutton2:active{
			background-color: greenyellow;
			border-color: #fff;
		}
		#hightlightbutton3{
			background-color: initial;
			border-color: #ccc;
		}
		#hightlightbutton3:active{
			background-color: skyblue;
			border-color: #fff;
		}
    </style>
</head>
<body>
   <div class="box">
        <div class="smbox">
            <button id="hightlightbutton1">点击1</button>
		    <button id="hightlightbutton2">点击2</button>
		    <button id="hightlightbutton3">点击3</button>
		    <script>
			    document.getElementById('hightlightbutton1').addEventListener('mouseup',function(){
				    this.style.backgroundColor = 'initial';
			    });
			    document.getElementById('hightlightbutton2').addEventListener('mouseup',function(){
				    this.style.backgroundColor = 'initial';
			    });
			    document.getElementById('hightlightbutton3').addEventListener('mouseup',function(){
				    this.style.backgroundColor = 'initial';
			    });
		    </script>
            <input type="text" value="请输入内容">
            <script>
                 
                 var text=document.querySelector('input');
                 
                 text.onfocus=function(){
                      
                      if(this.value==='请输入内容'){
                           this.value='';
                      }
                     
                      this.style.color='#333';
                 }
                 
                 text.onblur=function(){
                      if(this.value===''){
                           this.value = '请输入内容';
                      }
                      
                      this.style.color='#999';
                 }
            </script>
            
                
        </div>
   </div> 
</body>
</html>